import React from 'react'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useHistory } from 'react-router'
import classNames from 'classnames'

// 1. onLeftClick: 如果我绑定了, 就以我绑定的为主, 如果没有绑, 默认事件 (返回上一页)
// 2. 自己封装的组件, 如果直接使用, 默认没有 history 等 路由相关的 props 的

/**
 * 顶部导航栏
 * @param {String} props.className 样式类
 * @param {JSX} props.children 是通过组件标签体传递的子元素，用于填充中间标题区域
 * @param {JSX} props.rightContent 是用于填充右侧区域的元素
 * @param {Function} props.onLeftClick 左侧后退按钮的点击事件监听函数
 * @param {Function} props.onRightClick 右侧按钮的点击事件监听函数
 * @returns
 */
function NavBar({
  className,
  children,
  rightContent,
  onLeftClick,
  onRightClick,
}) {
  const history = useHistory()
  const defaultClick = () => history.go(-1)
  return (
    <div className={classNames([styles.root, className])}>
      {/* 后退按钮 */}
      <div className="left" onClick={onLeftClick || defaultClick}>
        <Icon type="iconfanhui" />
      </div>
      {/* 居中标题 */}
      <div className="title">{children}</div>

      {/* 右侧内容 */}
      <div className="right" onClick={onRightClick}>
        {rightContent}
      </div>
    </div>
  )
}

export default NavBar
